<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Cache-Control" content="no-siteapp">
<link rel="stylesheet" href="../../../static/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="../../../static/css/public.css" media="all" />
<link rel="stylesheet" href="../../../static/plugin/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<link href='../../../static/plugin/fullcalendar/css/fullcalendar.min.css' rel='stylesheet' />
<link href='../../../static/plugin/fullcalendar/css/fullcalendar.print.min.css' rel='stylesheet' media='print' />

<style>
body {
	font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
	font-size: 12px;
}

#calendar {
	margin: auto;
	width: 750px
}

#calendar .fc-content {
	font-size: 12px
}
</style>
</head>
<body class="childrenBody">
	<form class="layui-form">
		<blockquote class="layui-elem-quote quoteBox" has-permission="000500350000">
			<form class="layui-form">
				<div class="layui-inline">
					<label class="layui-form-label">所属部门</label>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" id="dname" readonly lay-verify="required" placeholder=""> <input type="hidden" class="searchVal" name="did" id="did">
					</div>
					<a class="layui-btn" id="btn_treeClean">清空</a>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">员工</label>
					<div class="layui-input-block">
						<select name="eid" id="eid" lay-search class="searchVal">
							<option value="">请选择</option>
						</select>
					</div>
				</div>
			</form>
		</blockquote>
		<blockquote class="layui-elem-quote quoteBox">
			<div class="layui-inline">
				<a class="layui-btn search_btn" data-type="reload" has-permission="000500350000">搜索</a> <a class="layui-btn layui-btn-danger geneAtdTable" data-type="reload" has-permission="000500350005">申报本月考勤</a>
			</div>
		</blockquote>
	</form>
	<div id="treeDiv" class="menuContent" style="display: none; position: absolute; background: white; border: 1px black solid; z-index: 999">
		<ul id="departmentTree" class="ztree" style="margin-top: 0; width: 160px;"></ul>
	</div>
	<div id='calendar'></div>
	<script type="text/javascript" src="../../../static/js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="../../../static/layui/layui.js"></script>
	<script type="text/javascript" src="../../../static/custom/js/common.js"></script>
	<script type="text/javascript" src="../../../static/plugin/zTree/js/jquery.ztree.core.js"></script>
	<script type="text/javascript" src='../../../static/plugin/fullcalendar/lib/moment.min.js'></script>
	<script type="text/javascript" src='../../../static/plugin/fullcalendar/fullcalendar.min.js'></script>
	<script type="text/javascript" src='../../../static/plugin/fullcalendar/locale-all.js'></script>
	<script type="text/javascript">
	layui.use([ 'form', 'layer', 'table', 'laypage', 'laytpl', 'laydate' ], function() {	
		var listApi = '../../../attendance/calendar/list';	
		var toListDetailApi = '../../../attendance/calendar/toListDetail';
		var geneAtdTableApi = '../../../attendance/calendar/geneAtdTable';
		var toListDetailHtml="ListDetail.html";
		var toAtdTableHtml="atdTable.html";
		var form = layui.form, layer = parent.layer === undefined ? layui.layer : top.layer;
		var $ = layui.jquery;
		var laytpl = layui.laytpl;
		var table = layui.table;
		var laydate = layui.laydate;
		var laypage = layui.laypage;
	
		//ztree
		var setting = {
			view : {
				dblClickExpand : false
			},
			data : {
				simpleData : {
					enable : true
				}
			},
			callback : {
				onClick : onClick
			}
		};
		
		//获取上一个月
		function getBeforeMonth() {
			var d = new Date();
			var currentYear = new Date().getFullYear();
			var currentMonth = new Date().getMonth() + 1;
			var beforeMonth = currentMonth - 1;
			if (beforeMonth == 0) {
				currentYear -= 1;
				beforeMonth = 12;
			}
			if (beforeMonth < 10) {
				beforeMonth = "0" + beforeMonth;
			}
			return {year:currentYear,month:beforeMonth};
		}
		function onClick(e, treeId, treeNode) {
			$("#did").val(treeNode.id);
			$("#dname").val(treeNode.name);
			hideMenu();
			//开启选择框
			eidSelectChange(2);
			//查找员工
			loadAjax( "../../../getEmployee", "get", {
				"did" : treeNode.id
			}, function(response) {
				baseCallBack(response, function(response) {
					$("#eid").empty();
					var str = '<option value="">请选择</option>';
					for( data of response.data){
						str+='<option value="'+data.id+'">'+data.rname+'</option>';
					}
					$("#eid").append(str);
					form.render('select');
				});
			});
		}
		$("#btn_treeClean").click(function() {
			$("#did").val('');
			$("#dname").val('');
			$("#eid").val('');
			eidSelectChange(1);
		})
		function showMenu() {
			var cityObj = $("#dname");
			var cityOffset = $("#dname").offset();
			$("#treeDiv").css({
				left : cityOffset.left + "px",
				top : cityOffset.top + cityObj.outerHeight() + "px"
			}).slideDown("fast");
			$("body").bind("mousedown", onBodyDown);
		}
		function hideMenu() {
			$("#treeDiv").fadeOut("fast");
			$("body").unbind("mousedown", onBodyDown);
		}
		function onBodyDown(event) {
			if (!(event.target.id == "btn_treeSelect" || event.target.id == "treeDiv" || $(event.target).parents("#treeDiv").length > 0)) {
				hideMenu();
			}
		}
		$("#dname").click(function() {
			showMenu()
		})
		loadAjax( "../../../getDepartment", "get",  {
			"did" : cache.did.get()
		}, function(response) {
			baseCallBack(response, function(response) {
				$.fn.zTree.init($("#departmentTree"), setting, response.data);
				eidSelectChange(1);
			});
		});

		function eidSelectChange(flag) {
			if (flag == 1) {
				$("#eid").attr("disabled", "true")
			} else {
				$("#eid").removeAttr("disabled");
				$("#eid").val('');
			}
			form.render('select');
		}
		//更新日历数据
		function drawCalendar(data) {
			//删除数据
			$('#calendar').fullCalendar('removeEvents');
			//定义事件数组
			var events = [];
			//遍历数据
			for (var i = 0, len = data.length; i < len; i++) {
				var attendance = data[i];
				if(attendance.type=='1'){
					//签入事件
					var item1 = {
						//事件内容
						title : attendance["ckin"] ? attendance["ckin"] : "无",
						//事件发生日期
						start : attendance.date,
						//事件在当天位置的排序
						order : 1
					};
					events.push(item1);
					//签出事件
					var item2 = {
						title : attendance["ckot"] ? attendance["ckot"] : "无",
						start : attendance.date,
						order : 2
					};
					events.push(item2);
					if(attendance.stat=='1'){
						//正常考勤
						var item3 = {
								title :"正常",
								start : attendance.date,
								order : 3,
								backgroundColor : "green"  //设置事件背景颜色
						};
						events.push(item3);
					}else{
						//异常
						var item3 = {
								title :"异常",
								start : attendance.date,
								order : 3,
								backgroundColor : "orange" //设置事件背景颜色
						};
						events.push(item3);
					}
				}else{
					//异常考勤
					var item4  = {
							title :attendance.stat=='1'?"加班":(attendance.stat=='2'?"带薪年假":(attendance.stat=='3'?"带薪调休":(attendance.stat=='4'?"普通请假":(attendance.stat=='5'?"外出":"")))),
							start : attendance.date,
							order : 4 ,
							backgroundColor : "red"  //设置事件背景颜色
					};
					events.push(item4);
				}
			}
			$('#calendar').fullCalendar('addEventSource', events);
		}
		$('#calendar').fullCalendar({
			locale : "zh-cn",
			header : {
				left : 'prev,next today',
				center : 'title',
				right : 'today prev,next'			
			},
			defaultDate:getBeforeMonth().year+"-"+getBeforeMonth().month,
			eventOrder : 'order',
			viewRender:function( view, element ){
				var moment = $('#calendar').fullCalendar('getDate');
				var jsonData = {};
				jsonData["selectedtime"] =moment.format("YYYYMM");
				//日历数据
				var data = merger(jsonData, getsearchVal());
				listLoad(data);
			},
			dayClick: function(date, jsEvent, view) {
				var eid=getsearchVal().eid;
				var jsonData = {};
				jsonData["eid"] = eid;
				jsonData["date"] = date.format("YYYYMMDD");
				loadAjax( toListDetailApi, "get", jsonData, function(response) {
					baseCallBack(response, function(response) {
						console.log(response);
						if(response.data&&response.data.length>=1){
							openAreaLayer("详细信息", toListDetailHtml +"?eid="+eid+ "&date=" +date.format("YYYYMMDD"), "900px", "450px");
						}else{
							layer.msg("没有这天的考勤记录");
						}
					});
				});
		    }

		});
		
		//生成考勤报表
		$(".geneAtdTable").on("click",function(){
			loadAjax( geneAtdTableApi, "get", getBeforeMonth(), function(response) {
				baseCallBack(response, function(response) {
					console.log(response)
					layer.msg(response.msg);
				})
			});
			
		});
		
		//搜索【此功能需要后台配合，所以暂时没有动态效果演示】
		$(".search_btn").on("click", function() {
			$('#calendar').fullCalendar('render');
			var moment = $('#calendar').fullCalendar('getDate');
			var jsonData = {};
			jsonData["selectedtime"] =moment.format("YYYYMM");
			var data = merger(jsonData, getsearchVal());
			listLoad(data);
		});
		function listLoad(data) {
			loadAjax( listApi, "get", data, function(response) {
				baseCallBack(response, function(response) {
					drawCalendar(response.data);
				});
			});
		}
		
		 
	});
</script>
</body>

</html>
